<template>
  <div class="big_parent" style="overflow-x: hidden;">
    <div class="big_charts" style="display:none">
     <div class="div_header" style="height: .9rem;" >
        <span>疫情上报系统</span>
        <div class="header_btn_div">
          <span @click="comeToPage(0)">
            <img src="../../assets/images/icon/ribaojilu.png" >
          </span>
          <span @click="comeToPage(1)">
            <img src="../../assets/images/icon/dowload.png" >
          </span>
        </div>
      </div>
      <div class="charts_filter">
        <span class="select_charts_time">
          <span class="handle_span"> <img class="img_select" src="../../assets/images/icon/select1.png" alt="" srcset=""> </span>
        </span>
        <span class="queryinfo_btn">查看明细</span>
      </div>
      <div class="big_charts_content">
        
        <div class="charts_status_div">
          <span class="charts_flag">
            本人状况
          </span>
          <div class="charts_content">
            <div class="stRep_each_echarts" id="myselfstatus" style="height:250px"></div>
          </div>
        </div>
        
      </div>
      
    </div>
    <div class="big_parent" >
      <div class="div_header" style="height: .9rem;" >
        <span>疫情上报系统</span>
        <div class="header_btn_div">
          <span @click="comeToPage(0)">
            <img src="../../assets/images/icon/ribaojilu.png" >
          </span>
          <span @click="comeToPage(1)">
            <img src="../../assets/images/icon/dowload.png" >
          </span>
        </div>
      </div>
      <div class="contents_div">
        <div class="div_title">
          <img src="../../assets/images/icon/tongji.png" alt="" srcset="">
          <span>统计结果</span>
        </div>
        <div class="filter_div">
          <div >
            <input type="text" ref="searchInput" placeholder="部门或名称">
            <span class="handle_span" @click="searchResult" > <img class="img_search" src="../../assets/images/icon/seach.png" alt="" srcset=""> </span>
          </div>
          <div @click="showTimePlugin">
            <span class="select_show">{{queryTime}}</span>
            <span class="handle_span"> <img class="img_select" src="../../assets/images/icon/select1.png" alt="" srcset=""> </span>
          </div>
          <div @click="showStatus">
            <span class="select_show" >{{statusStr}}</span>
            <span class="handle_span"> <img class="img_select" src="../../assets/images/icon/select1.png" alt="" srcset=""> </span>
            <span class="select_number">&nbsp;&nbsp;{{queryNum}}&nbsp;&nbsp;</span>
          </div>
        </div>
        <div class="list_div" ref="container">
          <mu-load-more  @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="loadMore">
          <li :class="{list_show:item.whetherShow,list_hide:!item.whetherShow}" v-for="(item,index) in recordList" :key="index">
            <div class="two_div">单位：{{item.workOrg}}</div>
            <div class="two_div">姓名：{{item.name}} <span @click="changeShowInfo(index,item.whetherShow)">
              <img v-if="item.whetherShow" style="width:3vh;height:2vh;top:2vh;" src="../../assets/images/icon/uptri1.png">
              <img v-else style="width:3vh;height:2vh;top:2vh;" src="../../assets/images/icon/dowtri1.png">
            </span></div>
            <div class="two_div">年龄：{{item.age}}
            </div>
            <div class="two_div">手机：{{item.phone}} <span><img src="../../assets/images/icon/phone_1.png"></span></div>
            <div class="big_info" v-if="item.whetherShow">
                <div class="one_div" v-if="limitArr.indexOf('ID_number')>=0">
                  <span class="one_div_title">身份证号：</span>
                  <span class="one_div_content">{{item.idNumber}}</span>
                </div>
                <div class="one_div" v-if="limitArr.indexOf('six')>=0">
                  <span class="one_div_title">性别：</span>
                  <span class="one_div_content">{{item.sex=='0'?'男':'女'}}</span>
                </div>
                <div class="one_div" v-if="limitArr.indexOf('guardianName')>=0">
                  <span class="one_div_title">监护人姓名：</span>
                  <span class="one_div_content">{{item.guardianName}}</span>
                </div>
                <div class="one_div" v-if="limitArr.indexOf('guardianIdNumber')>=0">
                  <span class="one_div_title">监护人身份证号：</span>
                  <span class="one_div_content">{{item.guardianIdNumber}}</span>
                </div>
                <div class="one_div" v-if="limitArr.indexOf('pregnant')>=0">
                  <span class="one_div_title">是否为孕妇：</span>
                  <span class="one_div_content">{{item.pregnant==0?'否':'是'}}</span>
                </div>
                
                <div class="one_div" v-if="limitArr.indexOf('currentCity')>=0">
                  <span class="one_div_title">当前所在地：</span>
                  <span class="one_div_content">{{item.currentCity}}{{item.currentCounty}}{{item.currentCountry}}{{item.currentVillage}}{{item.currentLocation}}</span>
                </div>
                <div class="one_div" v-if="limitArr.indexOf('toWuhan')>=0">
                  <span class="one_div_title">是否去过（路过）武汉：</span>
                  <span class="one_div_content">{{item.toWuhan==0?'否':'是'}}</span>
                </div>
                <div class="one_div" v-if="limitArr.indexOf('contactWuhan')>=0">
                  <span class="one_div_title">武汉接触史：</span>
                  <span class="one_div_content">{{item.contactWuhan}}</span>
                </div>
                <div class="one_div" v-if="limitArr.indexOf('toHubei')>=0">
                  <span class="one_div_title">是否去过（路过）湖北：</span>
                  <span class="one_div_content">{{item.toHubei==0?'否':'是'}}</span>
                </div>
                <div class="one_div" v-if="limitArr.indexOf('contactHubei')>=0">
                  <span class="one_div_title">是否接触过湖北返回人员：</span>
                  <span class="one_div_content">{{item.contactHubei==0?'否':'是'}}</span>
                </div>
                <div class="one_div" v-if="limitArr.indexOf('hubeiTouchHistory')>=0">
                  <span class="one_div_title">湖北接触史：</span>
                  <span class="one_div_content">{{item.hubeiTouchHistory}}</span>
                </div>
                <div class="one_div" v-if="limitArr.indexOf('healthCondition')>=0">
                  <span class="one_div_title">目前健康状况：</span>
                  <span class="one_div_content">{{item.healthCondition==0?'正常':'有症状'}}</span>
                </div>
                <div class="one_div" v-if="limitArr.indexOf('symptom')>=0">
                  <span class="one_div_title">症状：</span>
                  <span class="one_div_content">{{item.symptom}}</span>
                </div>

                <div class="one_div" v-if="limitArr.indexOf('firstSymptomDate')>=0">
                  <span class="one_div_title">首次出现症状日期：</span>
                  <span class="one_div_content">{{item.firstSymptomDate}}</span>
                </div>
                <div class="one_div" v-if="limitArr.indexOf('touchPersonIsolation')>=0">
                  <span class="one_div_title">是否有接触过的人被隔离：</span>
                  <span class="one_div_content">{{item.touchPersonIsolation}}</span>
                </div>
                <div class="one_div" v-if="limitArr.indexOf('touchPersonName')>=0">
                  <span class="one_div_title">接触人姓名：</span>
                  <span class="one_div_content">{{item.touchPersonName}}</span>
                </div>
                <div class="one_div" v-if="limitArr.indexOf('touchPersonPhone')>=0">
                  <span class="one_div_title">接触人联系电话：</span>
                  <span class="one_div_content">{{item.touchPersonPhone}}</span>
                </div>
                <div class="one_div" v-if="limitArr.indexOf('touchPersonLocation')>=0">
                  <span class="one_div_title">接触人住址及隔离医院：</span>
                  <span class="one_div_content">{{item.touchPersonLocation}}</span>
                </div>
                <div class="one_div" v-if="limitArr.indexOf('familyCountInWuhan')>=0">
                  <span class="one_div_title">在武汉的家人数：</span>
                  <span class="one_div_content">{{item.familyCountInWuhan}}</span>
                </div>
                <div class="one_div" v-if="limitArr.indexOf('familyNameInWuhan')>=0">
                  <span class="one_div_title">在武汉的家人姓名：</span>
                  <span class="one_div_content">{{item.familyNameInWuhan}}</span>
                </div>
                <div class="one_div" v-if="limitArr.indexOf('goToDoctor')>=0">
                  <span class="one_div_title">近期是否医院就诊：</span>
                  <span class="one_div_content">{{item.goToDoctor==0?'否':'是'}}</span>
                </div>
                <div class="one_div" v-if="limitArr.indexOf('medicalHospital')>=0">
                  <span class="one_div_title">就诊医院：</span>
                  <span class="one_div_content">{{item.medicalHospital}}</span>
                </div>

                <div class="one_div" v-if="limitArr.indexOf('medicalResult')>=0">
                  <span class="one_div_title">诊断结果：</span>
                  <span class="one_div_content">{{item.medicalResult}}</span>
                </div>
                <div class="one_div" v-if="limitArr.indexOf('medicalHistory')>=0">
                  <span class="one_div_title">既往病史：</span>
                  <span class="one_div_content">{{item.medicalHistory}}</span>
                </div>
            </div>
          </li>
          </mu-load-more>
           <div v-if="recordList.length==0" style="position: relative;top: 40px;left: 10%;width: 80%;height: 40%;text-align: center;">
              <div >暂无填报数据</div>
          </div>
           
       </div>
      </div>
    </div>
      <datetime style="display:none" clear-text="清除" @on-clear="clearTime" v-model="chartsQueryTime" @on-change="chartChangeTime" :show.sync="chartsTimeShow"></datetime>
      <datetime style="display:none" clear-text="清除" @on-clear="clearTime" v-model="queryTime" @on-change="changeTime" :show.sync="timeShow"></datetime>
      <popup-picker :show.sync="showPopupPicker"  :showCell="false" :columns="3" ref="pickerStatus" :show-name="true" @on-change="statusChange" :data="statusArr" v-model="statusModel"></popup-picker>
      
  </div>
</template>

<script>
//导入页面所需的标签
import {
  Tab,
  TabItem,
  Scroller,
  Cell,
  Group,
  Divider,
  XHeader,
  Search,
  Spinner,
  Drawer,
  XButton,
  Box,
  PopupPicker,
  Datetime,
  Flexbox,
  FlexboxItem
} from "vux";
import echarts from "echarts";
import { getListofcases,queryListFordaily } from '@/assets/js/service'
export default {
  //组件
  components: {
    Tab,
    TabItem,
    Scroller,
    Cell,
    Group,
    Divider,
    XHeader,
    Search,
    Spinner,
    Drawer,
    XButton,
    Datetime,
    Box,
    Flexbox,
    FlexboxItem,
    PopupPicker,
  },
  //数据模型
  data() {
    return {
      queryTime:"",
      limitArr:[],
      chartsQueryTime:"",
      timeShow:false,
      chartsTimeShow:false,
      queryNum:0,
      showPopupPicker:false,
      statusModel:[],
      statusArr: [{ name: '全部',value: '0',parent: 0 },{ name: '确诊',value: '1', parent: 0 }, {name: '疑似',value: '2',parent: 0 }, {name: '密接',value: '3',parent: 0}, {name: '正常',value: '4', parent: 0} ],
      // 结果列表
      recordList: [],
      currIndex: 1,
      refreshing: false,
      loading: false,
      statusStr:"全部",
    };
  },
  //vue实例创建后调用
  created() {
    let _this = this;
    _this.initLimit();
    _this.currIndex=1;
    _this.reloadList("");
  },
  mounted() {
    //this.myselfstatus();
    
  },
  //定义方法区
  methods: {
    initLimit(){
      //权限限制显示
      let _this=this;
      let limitArr=require("../../../static/formConfig.json");
      _this.limitArr=[];
      limitArr.forEach((item,index)=>{
        if(item.whetherShow){
          _this.limitArr.push(item.code);
        }
      })
      //limitArr
      console.log(limitArr)
    },
    refresh(){
      console.log("refresh ...")
      let _this=this;
      _this.refreshing = true;
      _this.$refs.container.scrollTop = 0;
      _this.reloadList("");
      
    },
    changeStatusToName(val){
      //0:全部1:确诊/2:疑似/3:密接/4:正常
      let statusName="";
      if(parseInt(val)==0){
        statusName="全部";
      }else if(parseInt(val)==1){
        statusName="确诊";
      }else if(parseInt(val)==2){
        statusName="疑似";
      }else if(parseInt(val)==3){
        statusName="密接";
      }else if(parseInt(val)==4){
        statusName="正常";
      }
      return statusName;
    },
    myselfstatus(){
		let option ={
			tooltip: {
				trigger: "item",
				formatter: "{a} <br/>{b} : {c} ({d}%)",
				show: false
			},
			 title: {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        x:'right',      //可设定图例在左、右、居中
        y:'top',  
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
		}
		var myChart = echarts.init(document.getElementById("myselfstatus"));
    myChart.setOption(option);
    },
    changeTime(){
      console.log("change time")
      this.currIndex=1;
      this.reloadList("");
    },
    chartChangeTime(){
      console.log("chartchange time")
    },
    clearTime(){
        this.queryTime="";
        this.currIndex=1;
        this.reloadList("");
    },
    comeToPage(_type){
      console.log("come to curr==>")
      if(_type==0){
        this.$router.push('/survey');
      }else{
        window.location.href="http://183.95.190.8:3645/app/down";
      }
    },
    changeShowInfo(_index,whetherShow){
      console.log(_index,whetherShow)
      let _this=this;
      let newRecordList=[];
      _this.recordList.forEach((item,index)=>{
        //debugger
        if(!whetherShow&&index==_index){
          item.whetherShow=true;
        }else{
          item.whetherShow=false;
        }
        newRecordList.push(item)
        // this.$set(item,index,_this.recordList)
      })
      _this.recordList=newRecordList;
    },
    showTimePlugin(){
      this.timeShow=true;
       
    },
    showStatus(){
      this.showPopupPicker=true;
    },
    reloadList(keyword){
      console.log("init reload keyword==>"+ keyword);
      let _this=this;
      let status="0";
      if(_this.statusModel.length>0){
        status=_this.statusModel[0];
      }
      let param={"keyword":keyword,"createTime":_this.queryTime,"status":status,"pageNo":_this.currIndex,"pageSize":20}
      queryListFordaily(param,function(res){
        console.log(res)
        if(res&&res.success){
          _this.refreshing = false;
          _this.loading=false;
          if(_this.currIndex==1){
            _this.recordList=[];
            _this.queryNum=res.data.total;
            _this.recordList=res.data.list;
            if(_this.recordList.length>0){
              _this.recordList.forEach((item,index)=>{
                item.whetherShow=false;
              })
            }
          }else{
            if(typeof(res.data.list)!="undefined"){
               res.data.list.forEach((_item,_index)=>{
                 _item.whetherShow=false;
                 _this.recordList.push(_item);
               })
            }
          }
        }else{
          _this.recordList=[];
        }
      })
      return;
      _this.recordList=data.data.dataList;
      
    },
    statusChange(val){
      console.log("status change",val)
      this.statusStr=this.$refs.pickerStatus.getNameValues();
      this.currIndex=1;
      this.reloadList("");
    },
    //输入关键字查询
    searchResult() {
      var keyWord = this.$refs.searchInput.value;
      this.recordList=[];
      this.currIndex=1;
      this.reloadList(keyWord)//请求接口
      
    },
    loadMore(selectItem) {
      var _this = this;
      setTimeout(() => {
        /*_this.showBottomToast("上拉加載！")*/
        _this.currIndex++;
        var keyWord = _this.$refs.searchInput.value;
        _this.reloadList(keyWord);
      }, 1000);
    }
  }
};
</script>
<style lang="less" scoped>
.big_parent{
  width: 100%;
  height: 100%;
  background: #ffffff;
  .big_charts{
    width: 100%;
    height: 100%;
    .charts_filter{
      width: 100%;
      height: 10%;
      .select_charts_time{
        width: 70%;
        height: 60%;
        position: relative;
        margin: 3% 3%;
        float: left;
        display: inline-block;
        border-radius: 3px;
        border: 1px solid rgba(51,51,51,.48);
        .handle_span{
          width: 10%;
          height: 100%;
          position: absolute;
          right: 0px;
          .img_select{
            width: 75%;
            margin-top: 55%;  
          }
        }
      }
      .queryinfo_btn{
        width: 20%;
        height: 60%;
        display: inline-block;
        background: #265eff;
        color: #ffffff;
        text-align: center;
        line-height: 6vh;
        margin: 3% 0%;
        border-radius: 7px;
      }
    }
    .big_charts_content{
      width: 100%;
      height: calc( 100% - .9rem - 10% );
      overflow: auto;
      .charts_status_div{
        width: 94%;
        height: 50%;
        margin-left: 3%;
        position: relative;
        border-radius: 3px;
        border: 1px solid #55d5ff;
        .charts_flag{
          width: 20%;
          height: 30px;
          display: block;
          position: absolute;
          top: 0;
          left: 3%;
          color: #ffffff;
          text-align: center;
          line-height: 30px;
          background-color: #55d5ff;
          box-shadow: 0px 4px 1px 0px 
            rgba(0, 0, 0, 0.32);
          border-radius: 0px 0px 10px 10px;
        }
        .charts_content{
          width: 100%;
          height: calc( 100% - 30px );
          margin-top: 30px;
        }
      }

    }
  }
  .div_header{
    width: 100%;
    height: .9rem;
    line-height: .9rem;
    text-align: center;
    color: #ffffff;
    font-size: 17px;
    position: relative;
    background-color: #265eff;
	  box-shadow: 0px 1px 0px 0px 
		rgba(255, 255, 255, 0.34);
    .header_btn_div{
      width: 20%;
      height: .9rem;
      position: fixed;
      right: 0;
      top: 0px;
      span{
        width: 45%;
        height: 90%;
        display: block;
        float: left;
        img{
          width: 62%;
          margin-top: 25%;
          margin-left: 25%;
        }
      }
    }
  }
  .contents_div{
    width: 100%;
    height: calc( 100% - 1rem );
    .div_title{
      width: 100%;
      height: 8%;
      color: #333333;
      font-size: 18px;
      img{
        width: 14vw;
        vertical-align: middle;
      }
      span{
        width: 50vw;
        display: inline-block;
      }
    }
    .filter_div{
      width: 92%;
      height: 6%;
      margin-left: 4%;
      div:nth-child(1){
        margin-left: 0px;
      }
      div{
        width: 30%;
        height: 100%;
        font-size: 13px;
        float: left;
        color: #000;
        margin-left: 5%;
        position: relative;
        //background-color: rgba(0,0,0,.2);
        border-radius: 4px;
        border: 1px solid rgba(51, 51, 51, 0.48);
        input{
          width: 80%;
          height: 100%;
          color: #000;
          padding: 3px;
        }
        .select_show{
          width: 80%;
          height: 100%;
          line-height: 5vh;
          padding-left: 3px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          
        }
        .select_number{
          display: block;
          position: absolute;
          background: red;
          color: #ffffff;
          right: -3vw;
          top: -14px;
          height: 20px;
          border-radius: 30px;
        }
        .handle_span{
          width: 20%;
          height: 100%;
          position: absolute;
          right: 0px;
          .img_search{
            width: 80%;
            margin-top: 50%;
          }
          .img_select{
            width: 75%;
            margin-top: 65%;  
          }
        }
      }
    }
    .list_div{
      width: 92%;
      height: calc( 100% - 6% - 10% );
      overflow-y: auto;
      margin-left: 4%;
      color: #333333;
      .list_hide{
        width: 100%;
        overflow: hidden;
        margin-top: 2vh;
        border-radius: 3px;
        border: solid 1px rgba(51,51,51,0.48);
      }
      .list_show{
        width: 100%;
        margin-top: 2vh;
        overflow: hidden;
        border-radius: 3px;
        border: solid 1px rgba(51,51,51,0.48);
      }
      li{
        .two_div{
          width: 50%;
          height: 6vh;
          padding-left: 2%;
          line-height: 6vh;
          position: relative;
          float: left;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          img{
            position: absolute;
            right: 5px;
            top: 1vh;
            height: 3vh;
          }
        }
        .big_info{
          width: 100%;
          float: left;
          padding-top: 3%;
          border-top: 1px solid rgba(85,213,255,0.4);
          .one_div{
            width: 100%;
            line-height: 4vh;
            .one_div_title{
              // width: 24%;
              padding-left: 2%;
              display: inline-block;
              float: left;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .one_div_content{
              // width: 76%;
              display: inline-block;
            }

          }
          .one_div_big{
            width: 100%;
            line-height: 4vh;
            .one_div_title{
              width: 36%;
              padding-left: 2%;
              display: inline-block;
              float: left;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .one_div_content{
              width: 64%;
              display: inline-block;
            }
          }
        }
      }
    }
  }
}
</style>
